<template>
    <div id="adviceBody">
        <div id="adviceTitle">
            <h1 text>{{ advice.title }}</h1>
            <div id="tips">
                <span>{{ advice.time }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>{{ advice.publisher }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>发送对象:{{ advice.pubRange }}</span>
            </div>
            <el-divider></el-divider>
        </div>
        <div v-html="advice.content" id="adviceContent"></div>
        <div>
            <div id="enclosure"><el-link type="primary" @click="download" v-show="advice.fileUrl != null">附件</el-link></div>
        </div>
        <div id="census">
            <el-divider></el-divider>
            <span
                >阅读情况统计:截至到目前为止有<span style="color: #99ff33">&nbsp;{{ readNum }}&nbsp;</span>人已读</span
            >
        </div>
        <div id="showTable">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column label="序号" width="55">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="className" label="部门/年级" width="180"> </el-table-column>
                <el-table-column prop="readNum" label="已读" width="180"> </el-table-column>
                <el-table-column prop="unreadNum" label="未读" width="180"> </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="showDialog(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="阅读情况" :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                    <el-table-column label="序号" width="150">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="name" label="姓名" width="300"></el-table-column>
                    <el-table-column property="true" label="阅读情况">
                        <template slot-scope="scope">
                            <span v-if="scope.row.flag=='0'" style="color:#66DD00">已读</span>
                            <span v-if="scope.row.flag=='1'" style="color:#E63F00 ">未读</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            advice: {
                title: ''
            },
            readNum: 0,
            tableData: [],
            dialogTableVisible: false,
            gridData: [],
            query: {
                // 分页参数
                pageIndex: 1,
                pageSize: 5
            }
        };
    },
    created() {
        // 通过路由id获取通知的id
        this.$axios.get('/advice/admin/get/' + this.$route.query.id).then((r) => {
            if (r.data.code == 200) {
                this.advice = r.data.data;
            }
        });
        // 获取当前阅读次数
        this.$axios.get('/advice/readNum/' + this.$route.query.id).then((r) => {
            if (r.data.code == 200) {
                this.readNum = r.data.data;
                console.log(this.readNum);
            }
        });
        // 获取每个班级阅读情况
        this.$axios.get('/advice/admin/census/' + this.$route.query.id).then((r) => {
            if (r.data.code == 200) {
                this.tableData = r.data.data;
                //console.log(r.data.data);
            }
        });
    },
    methods: {
        download() {
            // 获取文件后缀
            var suffix = this.advice.fileUrl.substring(this.advice.fileUrl.lastIndexOf('.'));
            this.$axios.post('/job/admin/downLoadFile/', { fileUrl: this.advice.fileUrl }, { responseType: 'blob' }).then((r) => {
                console.log(r);
                let blob = new Blob([r.data]);
                let url = window.URL.createObjectURL(blob); // 创建 url 并指向 blob
                let a = document.createElement('a');
                a.href = url;
                a.download = '附件.' + suffix;
                a.click();
                window.URL.revokeObjectURL(url); // 释放该 url
            });
        },
        showDialog(row) {
            console.log(row);
            // 通过班级id，通知id查询已读/未读
            this.$axios
                .post('/advice/admin/getcensusStu', {
                    pageBean: {
                        currPage: this.query.pageIndex,
                        pageSize: this.query.pageSize
                    },
                    advice: {
                        id: this.$route.query.id,
                        klassId:row.classId
                    }
                })
                .then((r) => {
                    if (r.data.code == 200) {
                        //console.log(r.data.data.data);
                        this.gridData = r.data.data.data;
                    }
                });
            this.dialogTableVisible = true;
        }
    }
};
</script>
<style>
#adviceBody {
    background-color: white;
}
#adviceTitle {
    text-align: center;
}
#tips {
    color: #888888;
}
#adviceContent {
    font-size: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    background-color: ghostwhite;
}
#enclosure {
    font-size: 15px;
    padding-left: 20px;
    padding-top: 30px;
}
#census {
    font-size: 18px;
    padding-left: 20px;
    padding-top: 30px;
}
#showTable {
    padding-left: 20px;
    padding-top: 30px;
}
</style>